<template>
    <el-form-item prop="reportType" class="block-item" style="width: 100%;">
        <el-card class="form-card" style="width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>配置报表类型</span>
                    <el-button type="primary" size="small" :disabled="!props.hasXy"
                        @click="handleGenerateChart">生成图表</el-button>
                </div>
            </template>
            <el-radio-group v-model="props.form.reportType" @change="handleReportTypeChange">
                <el-radio v-for="item in props.reportTypeOptions" :key="item.value" :value="item.value">
                    {{ item.label }}
                </el-radio>
            </el-radio-group>
            <v-chart class="chart" :option="props.chartOption" :autoresize="true" style="width: 100%; height: 400px" />
        </el-card>
    </el-form-item>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    form: {
        type: Object,
        required: true
    },
    hasXy: {
        type: Boolean,
        required: true
    },
    reportTypeOptions: {
        type: Array,
        required: true
    },
    chartOption: {
        type: Object,
        required: true
    }
})

const emit = defineEmits(['report-type-change', 'handle-generate-chart'])

const chartOption = ref({
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: []
    },
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: []
})

const handleReportTypeChange = (value) => {
    console.log('图表类型变更:', value)
    emit('report-type-change', value)
}

const handleGenerateChart = async () => {
    emit('handle-generate-chart')
}
</script>

<style scoped>
.chart {
    margin-top: 16px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>